<template>
    <div class="uploadCont">
        <ul class="showImage">
            <li @click="onClickUp">
                <img src="" style="width:100%;height:100%;background-color:#f40;"  />
            </li>
            <li @click="previewImage(saveImages.previewImageList[index])"
                v-for="(item,index) in saveImages.previewThumbList"
                :key="index">
                <img :src="item"/>
                <i class="icon iconfont icon-shanchu remove" @click.stop @click="remove(index)"></i>
            </li>
        </ul>
    </div>
</template>
<script>
    import wx from 'weixin-js-sdk'
    export default {
        data() {
            return {
                userCode: localStorage.userCode || '',//用户code
                images: {
                    localId: [], //已选择的本地图片
                    serverId: [] //微信服务器返回的mediaId
                },
                saveImages: {
                    previewImageList: [], //预览大图数组,
                    previewThumbList: [], //预览缩略图数组
                    saveImageList: [], //预览大图数组//保存图片
                },
                uploadPath: '' //图片上传的路径：为空时，默认下载到当前项目的/mcupload路径下
            }
        },
        methods: {
            // 获取微信config
            initWx(){
                 wx.config({
                        debug: false,////生产环境需要关闭debug模式
                        appId: res.data.result.appId,//appId通过微信服务号后台查看
                        timestamp: res.data.result.timestamp,//生成签名的时间戳
                        nonceStr: res.data.result.noncestr,//生成签名的随机字符串
                        signature: res.data.result.signature,//签名
                        jsApiList: [//需要调用的JS接口列表
                            'checkJsApi',//判断当前客户端版本是否支持指定JS接口
                            'onMenuShareTimeline',//分享给好友
                            'onMenuShareAppMessage',//分享到朋友圈
                            'hideMenuItems',//批量隐藏微信功能按钮
                            'chooseImage',
                            'previewImage',
                            'uploadImage',
                            'downloadImage'
                        ]
                    });

            },
            onClickUp(){
                console.log('/////////')
                let _this = this;
                wx.chooseImage({
                count: 5, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二6者都有
                success: function (res) {
                    console.log(res)
                    // let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    // // 判断 ios 
                    // if (window.__wxjs_is_wkwebview) {  
                    // _this.wxgetLocalImgData(localIds);
                    // }else{
                    // localIds.forEach((item, index) => {
                    //     _this.localIdImgs.push(item);
                    //     if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){
                    //     _this.imgLenght = false
                    //     }
                    // });
                    // }
                    // _this.wxuploadImage(localIds);
                },
                fail: function (res) {
                    console.log("失败")
                }
                });
            }
        }
    }
</script>
<style scoped>
    .uploadCont .showImage {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        margin: 7px 0 5px 10px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }

    .uploadCont .showImage li {
        position: relative;
        width: 28vw;
        height: 28vw;
        list-style: none;
        /*background: #f00;*/
        margin: 5px 2vw 7px 0;
    }

    .uploadCont .showImage .remove {
        z-index: 11;
        position: absolute;
        top: -14px;
        right: -20px;
        font-size: 26px
    }

    .uploadCont .showImage img {
        width: 28vw;
        height: 28vw;
    }
</style>